import React from 'react';
import {
  ScrollView,
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  SafeAreaView,
} from 'react-native';
import theme from '../utils/theme';
import useHideTabBar from '../utils/useHideTabBar';
import API from '../Network/Api';
import Toast from 'react-native-toast-message';
import {showToast} from '../utils/toastUtils';
import { CustomText } from "../customview/CustomText";
import { normalize } from "../utils/commonUtils";

let isEnabled = true;

const ProductDetailPage = ({navigation, route}) => {
  const {productItem} = route.params;
  useHideTabBar(navigation);

  const handlePurchase = () => {
    if (isEnabled) {
      isEnabled = false;
      API.goodsExchangeReq(productItem.id)
        .then(async response => {
          if (response.resultCode === '1') {
            showToast({text2: '兑换成功！'});
          } else {
            console.log(response);
            if (response.data.errMsg.includes('积分不足')) {
              showToast({text2: '积分不足，兑换失败！'});
            } else {
              showToast({text2: '兑换失败，请稍后重试'});
            }
          }
        })
        .catch(error => {
          console.error('兑换失败:', error);
          showToast({text2: '服务器异常，请稍后重试'});
        })
        .finally(() => {
          setTimeout(() => {
            isEnabled = true;
          }, 300);
        });
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        {/* 商品头部信息 */}
        <View style={styles.headerContainer}>
          <Image source={productItem.image} style={styles.productImage} />
          <View style={styles.separator} />
          <CustomText style={styles.productName}>{productItem.name}</CustomText>
          <View style={styles.pointBgStyle}>
            <Image style={styles.pointIcon} source={require('../../res/image/point_icon.png')} />
            <CustomText style={styles.pointStyle}>{productItem.price}积分兑换</CustomText>
          </View>
          {/*<View style={styles.infoRow}>*/}
          {/*  <Text style={styles.infoText}>价值: {productItem.value}</Text>*/}
          {/*  <Text style={styles.infoText}>*/}
          {/*    已兑换{productItem.exchangedCount}件*/}
          {/*  </Text>*/}
          {/*  <Text style={styles.infoText}>库存{productItem.stock}件</Text>*/}
          {/*</View>*/}
        </View>

        {/* 提示性分割线 */}
        <View style={styles.hintSeparatorContainer}>
          <View style={styles.hintSeparatorLine} />
          <CustomText style={styles.hintText}>滑动显示商品详情</CustomText>
          <View style={styles.hintSeparatorLine} />
        </View>

        {/* 商品图文显示 */}
        <View style={styles.detailContainer}>
          <CustomText style={styles.detailText}>{productItem.description}</CustomText>
          {/* 这里可以添加更多商品图片等内容 */}
        </View>

        {/* 立即兑换按钮占位 */}
        <View style={styles.buttonPlaceholder} />
      </ScrollView>
      {/* 立即兑换按钮 */}
      <View style={styles.bottomViewStyle}>
        <TouchableOpacity style={styles.exchangeButton} onPress={handlePurchase}>
          <CustomText style={styles.exchangeButtonText}>立即兑换</CustomText>
        </TouchableOpacity>
      </View>
      <Toast />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    backgroundColor: '#f6f6f6', // 淡灰色背景
  },
  headerContainer: {
    backgroundColor: 'white',
    padding: 20,
  },
  productImage: {
    width: 200,
    height: 200,
    resizeMode: 'cover',
    marginBottom: 20,
    alignSelf: 'center'
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
    width: '100%',
    marginBottom: 20,
  },
  productName: {
    fontSize: normalize(20),
    fontWeight: 'bold',
    marginBottom: 10,
  },
  infoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  },
  infoText: {
    fontSize: normalize(14),
    color: '#666',
  },
  hintSeparatorContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 20,
  },
  hintSeparatorLine: {
    flex: 1,
    height: 1,
    backgroundColor: '#ccc',
  },
  hintText: {
    paddingHorizontal: 10,
    color: '#666',
  },
  detailContainer: {
    padding: 20,
  },
  detailText: {
    fontSize: normalize(16),
    lineHeight: 24,
  },
  buttonPlaceholder: {
    height: 60, // 与按钮高度相同，用于占位
  },
  bottomViewStyle: {
    flex: 1,
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  exchangeButton: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FAB00A',
    height: 40,
    borderRadius: 20,
    width: '60%',
    marginBottom: 40,
    marginTop: 10,
  },
  exchangeButtonText: {
    color: 'white',
    fontSize: normalize(18),
    fontWeight: 'bold',
  },
  pointIcon: {
    marginLeft: -20,
  },
  pointBgStyle: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'flex-start', // 让 View 的宽度根据内容自动调整
    paddingHorizontal: 8, // 可选：添加内边距使内容与边框有一定间距
    height: 30,
    borderRadius: 11, // 可选：添加圆角效果
    marginTop: 10,
    marginBottom: 20,
    marginLeft: 10,
    backgroundColor: 'rgba(255, 233, 199, 0.5)',
  },
  pointStyle: {
    color: '#F5AF3F',
    fontSize: normalize(16),
    marginLeft: 10,
    marginRight: 20,
    fontWeight: '500',
  },
});

export default ProductDetailPage;
